<script lang="ts">
import { defineComponent, ref, onMounted, watch, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getUserInfo, getUserFans, getUserFollowees, getUserArticles } from "../api/userInfoView"
import { storeToRefs } from 'pinia';
import { useCounterStore } from '..//stores/home'
import { showConfirmDialog } from 'vant';
import { useScroll } from '../hooks/useScroll'
import { getUser } from '../api/User'
export default defineComponent({
    setup() {
        const store = useCounterStore()
        const { userid } = storeToRefs(store);
        // 作为 action 的 increment 可以直接解构
        const { changnum, increment, incrementfalse, unlikeFuns, likeFuns, uncommentFuns, commentFuns } = store;
        let router = useRouter()
        let route = useRoute()
        let token: any = ref(window.localStorage.getItem("userId"))
        console.log(token.value);
        let page: number = 1;
        let scrollTop = ref<number>(document.documentElement.scrollTop);
        let isbottom = ref(false);
        let attebtionarr: any = window.localStorage.getItem('idarr');
        let attention = ref(JSON.parse(attebtionarr) || []);
        attention.value=attention.value.reverse();
        console.log(2222222, attention.value)
        let userdataarr: any = ref([]);
        let getUserFun = (userid: any) => {
            getUser(userid).then((data: any) => {
                console.log(data);
                userdataarr.value.push(data.data);
                console.log('33',userdataarr.value)
            })
        }
        attention.value.forEach((item: any) => {
            getUserFun(Number(item));
        })
        let tovip: any = (): any => {
            router.push({ path: "/vip" })
        }
        // 获取用户关注
        let fanslist: any = ref([])

        // 加载动画是否需要
        let fanslengthnum: any = ref(null)
        const getUserFolloweesFun = (): any => {
            getUserFollowees(route.query.userid || token.value, { page }).then((data: any) => {
                console.log("getUserFollowees=>", data)
                if (data.data.list) {

                    fanslengthnum.value = data.data.list.length
                } else {
                    fanslengthnum.value = data.data.length

                }



                if (data.message == "OK") {
                    data.data.list.forEach((item: any) => {
                        fanslist.value.push(item);
                    })
                } else {
                    fanslist.value.push({
                        userinfo: {
                            username: '该 用 户 已 关 闭 查 看 列 表',
                            id: 1, count: { count_follower: "" }
                        },

                    })
                }

            })
        }
        let onscroll = () => {
            scrollTop.value = document.documentElement.scrollTop;
            isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
            console.log('9999999999999', isbottom.value)

        }

        watch(token, () => {
            console.log("qqqq");
            getUserFolloweesFun()

        })
        watch(isbottom, () => {
            if (isbottom.value) {
                page += 1;
                console.log('222222222page=>', page);
                getUserFolloweesFun();
            }

        })
        // 取消关注
        let toflaselike = (id: number, index: number) => {

            showConfirmDialog({
                //   title: '标题',
                message:
                    '确定要取消关注TA吗？',
            })
                .then(() => {
                    // on confirm
                    console.log(id);
                    console.log(index);
                    fanslist.value.splice(index, 1)
                    console.log(fanslist.value);



                })
                .catch(() => {
                    // on cancel
                    console.log(id);
                    console.log(index);


                });
        }
        let toconcelMylike = (idr: any) => {
            showConfirmDialog({
                //   title: '标题',
                message:
                    '确定要取消关注TA吗？',
            })
                .then(() => {
                    // on confirm
                    console.log(idr);
                    userdataarr.value = [];
                    attention.value = attention.value.filter((item: any) => {
                        return item != idr;
                    });
                    window.localStorage.setItem('idarr', JSON.stringify(attention.value));
                    console.log('2222222', attention.value);
                    attention.value.forEach((item: any) => {
                        getUserFun(Number(item));
                    })


                })
                .catch(() => {
                    // on cancel


                });
        }
        // 点击头像跳转主页
        let touserinfo = (id: any) => {
            console.log(id);
            router.push({
                path: "/userdetail",
                query: {
                    userid: id
                }
            })
        }

        let toregisterFun = () => {
            router.push({
                path: '/register',
            });

        }


        onMounted(() => {
            getUserFolloweesFun()
            window.addEventListener('scroll', onscroll);

        })
        onUnmounted(() => {
            window.removeEventListener('scroll', onscroll)
        })

        return {
            tovip,
            fanslist,
            token,
            fanslengthnum,
            touserinfo,
            toflaselike,
            toregisterFun,
            userdataarr,
            toconcelMylike

        }
    },


})
</script>

<template>
    <div class="attention">
        <div class="attention-top">
            <div class="iconfont icon-xiangzuojiantou" @click="$router.back()"></div>
            <div>关注列表</div>
            <div></div>
        </div>
        <div class="attention-main" v-for="(item, index) in userdataarr" :key="item.id">
            <div class="attention-main-left" v-if="item.username !== '该 用 户 已 关 闭 查 看 列 表'"
                @click="touserinfo(item.id)">
                <img :src="item.avatar" alt="">
                <div class="smallimage" v-if="item.vip_flag == 1" style="background-color: #fff;">
                    <img src="../assets/images/177会员、vip.png" alt="" />
                </div>
            </div>
            <div class="attention-main-center">
                <div class="attention-size">
                    <div class="attention-name">
                        {{ item.username }}
                        <span class="iconfont icon-VIP1" v-if="item.vip_flag == 1" style=" color: #e73f29;
                                            "></span>
                    </div>
                    <div class="attention-sess">
                        <!-- <span v-if="item.occupation">{{ item.userinfo.occupation
                                    }}&nbsp;.&nbsp;</span> -->
                        <span v-if="item.ip_location">{{ item.ip_location +'.'}}&nbsp;&nbsp;</span> <span
                            v-if="item.username !== '该 用 户 已 关 闭 查 看 列 表'">粉丝{{
                                item.count.count_follower }}</span>
                    </div>
                </div>

                <div class="attention-right" @click="toconcelMylike(item.id)"
                    v-if="item.username !== '该 用 户 已 关 闭 查 看 列 表'"><span>
                        已关注
                    </span></div>
            </div>
        </div>
        <div class="attention-main" v-for="(item, index) in fanslist" :key="item.userinfo.id">
            <div class="attention-main-left" v-if="item.userinfo.username !== '该 用 户 已 关 闭 查 看 列 表'"
                @click="touserinfo(item.userinfo.id)">
                <img :src="item.userinfo.avatar" alt="">
                <div class="smallimage" v-if="item.userinfo.vip_flag == 1" style="background-color: #fff;">
                    <img src="../assets/images/177会员、vip.png" alt="" />
                </div>
            </div>
            <div class="attention-main-center">
                <div class="attention-size">
                    <div class="attention-name">
                        {{ item.userinfo.username }}
                        <span class="iconfont icon-VIP1" v-if="item.userinfo.vip_flag == 1" style=" color: #e73f29;
                        "></span>
                    </div>
                    <div class="attention-sess"><span v-if="item.userinfo.occupation">{{ item.userinfo.occupation
                    }}&nbsp;.&nbsp;</span>
                        <span>{{ item.userinfo.ip_location }}&nbsp;.&nbsp;</span> <span
                            v-if="item.userinfo.username !== '该 用 户 已 关 闭 查 看 列 表'">粉丝{{
                                item.userinfo.count.count_follower }}</span>
                    </div>
                </div>

                <div class="attention-right" @click="toflaselike(item.userinfo.id, index)"
                    v-if="item.userinfo.username !== '该 用 户 已 关 闭 查 看 列 表'"><span>
                        已关注
                    </span></div>
            </div>
        </div>
        <div class="loading" v-if="fanslengthnum == 10">
            <van-loading size="24px">加载中...</van-loading>

        </div>

    </div>
</template>
<style lang="scss" scoped>
.attention {
    padding: 15px 0;

    .loading {
        width: 100%;
        text-align: center;

    }

    .attention-top {
        padding: 0 15px;
        display: flex;
        font-size: 16px;
        justify-content: space-between;


    }

    .attention-main {
        padding: 15px 15px;
        display: flex;
        margin: 16px 0;
        border-top: 1px solid #f7f7f7;
        border-bottom: 1px solid #f7f7f7;

        // justify-content: space-between;
        .attention-main-left {
            width: 50px;
            height: 50px;
            margin-left: 5px;
            border-radius: 50%;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;

            }

            .smallimage {
                position: absolute;
                top: 30px;
                right: 0;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                }
            }
        }

        .attention-main-center {
            display: flex;
            justify-content: space-between;
            margin-left: 10px;
            flex: 1;

            .attention-size {
                height: 50px;
                line-height: 25px;
                margin-top: 3px;

                .attention-name {
                    font-size: 14px;
                }

                .attention-sess {
                    font-size: 12px;
                    color: #a0a0a0;

                    &>span:nth-child(1) {
                        margin-left: 0px;
                    }

                    span {
                        // margin: 6px;
                    }
                }
            }



            .attention-right {
                height: 50px;
                line-height: 50px;

                span {
                    font-size: 14px;
                    padding: 5px 12px;
                    border-radius: 999px;
                    background-color: #f0f0f0;
                    color: #acacac;
                }
            }
        }
    }
}
</style>